window.addEventListener('load',function(){
   let id = location.search.split('=')[1];
//  评论分页
let plPage = location.hash.replace('#!fenye=', '') || 1;
let plPageSize = 5;
let plTotals = 0;
   
    fetch(`http://39.96.88.57:9090/api/www/music/musicInfo?mid=${id}&httpsStatus=1&reqId=074a4a40-dea6-11ed-b39e-eb80a4d819f6`).then(r=>r.json()).then(res=>{
    infoL.innerHTML+=`
    <div class="cover_out">
                    <img src="${res.data.pic}" class="coverImg" alt="">
                    </div>
                    <p class="intr">专辑简介</p>
                    <p class="intr_txt">${res.data.albuminfo}</p>
                    <div>
                        <a href="javascript:;" class="download laodss bg_primary">
                            <i></i>
                            下载这首歌
                        </a>
                    </div>
                    <div class="qrcode-container">
                        <img src="	https://h5static.kuwo.cn/www/kw-www/img/qrcode.d53daff.png" alt="">
                        <p>手机扫描二维码下载客户端</p>
                    </div>
                     <div class="model">
                    <div class="tits">
                        <span>提示</span>
                        <i></i>
                    </div>
                    <div>
                        <p class="tips">下载歌曲，请在酷我音乐客户端操作</p>
                    </div>
                    <div class="btnss">
                        <a href="kuwo://play">已安装酷我音乐</a>
                        <a href="http://down.kuwo.cn/mbox/kwmusic_web_6.exe" class="loads">下载酷我音乐</a>
                    </div>
                </div>
    `
    conr.innerHTML+=`
        <div id="conrTitle">
                            <span class="title" title="${res.data.name}">${res.data.name}</span>
                            <p class="artist_name flex">
                                <span class="name" title="${res.data.artist}">${res.data.artist}</span>
                            </p>
                            <p class="song_info">
                                <span>专辑: </span>
                                <span class="tip album_name" title="${res.data.album}">${res.data.album}</span>
                                <span>发行时间: </span>
                                <span class="tip album_name">${res.data.releaseDate}</span>
                            </p>
                        </div>
                        <div class="btns">
                            <button class="bg_primary">
                                <i class="i1"></i>
                                <span>播放全部</span>
                            </button>
                            <button>
                                <i class="i2"></i>
                                <span>添加</span>
                            </button>
                            <button>
                                <i class="i3"></i>
                                <span>收藏</span>
                            </button>
                            <button>
                                <i class="i5"></i>
                                <span>分享</span>
                            </button>

                            <a href="#comment_on">
                                <i class="i4"></i>
                                <span>评论</span>
                            </a>

                        </div>
    `
     // 点击下载歌单
    $('.laodss').click(function(){
        $('.model').toggle()
    })
    $('.tits i').click(function(){
        $('.model').hide()
    })
    })



    fetch(`http://m.kuwo.cn/newh5/singles/songinfoandlrc?musicId=${id}&httpsStatus=1&reqId=076880a0-dea6-11ed-b39e-eb80a4d819f6`).then(r=>r.json()).then(res=>{
        res.data.lrclist.forEach(item => {
            lyric.innerHTML+=`
             <p>${item.lineLyric}</p>
            `
        });

        let ps = document.querySelectorAll('#lyric p');
        ps[0].className='active';
        
    })
let flag=false;
$('.down span').click(function(){
    $('#lyric').toggleClass('lyricHeight');
    if(!flag){
    $('.down span').text('收起');
    flag=true;
    }else if(flag){
    $('.down span').text('展开');
    flag=false;
    }
    $('.down i').toggleClass('tranStyle');
})


// 渲染评论
zuire();
zuixin();

// 最热评论
function zuire(){
    fetch(`http://39.96.88.57:9090/comment?type=get_rec_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=15&sid=${id}&uid=0&prod=newWeb&httpsStatus=1&reqId=0a9e87e0-deb2-11ed-891e-17b5ad163ec0`).then(r=>r.json()).then(res=>{
allS1.innerHTML=''
allS1.innerHTML+=`
   ${res.total?`<div class="type"><span>热门评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:``}
           `
              res.rows.forEach((item,index)=>{
                if(index<5){
                    allS1.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="http://q.qlogo.cn/qqapp/100243533/4BDAC75DED25461B51510E9B31D006F9/100"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                <div class="each-comment-content text-selection">${item.msg}</div>
                                ${item.reply?` <div class="each-reply-content"><a href="javascript:;" class="reply-name">${item.reply?'@'+item.reply.u_name:''}</a> <span
                                class="text-selection" title="${item.reply?'':item.msg}">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
plRender();
})
}

// 最新评论
function zuixin(){
fetch(`http://39.96.88.57:9090/comment?type=get_comment&f=web&page=${plPage}&rows=${plPageSize}&digest=15&sid=${id}&uid=0&prod=newWeb&httpsStatus=1&reqId=0abfa470-deb2-11ed-891e-17b5ad163ec0`).then(r => r.json()).then(res => {
          plTotals = res.total;
            allS2.innerHTML='';
           allS2.innerHTML+=`
            ${res.total?`<div class="type"><span>最新评论</span> <span class="comment-num">${res.total+'条'}</span></div>`:`<div class="nodata flex">
                            <div class="inner">
                                <img src="https://h5static.kuwo.cn/www/kw-www/img/introduce_grey.f18848f.png"
                                   alt="">
                                <div class="tipp">暂无评论</div>
                            </div>
                        </div>${plPagingTest.innerHTML=''}`}
           ` 
              res.rows.forEach((item,index)=>{
                if(index<5){
                    allS2.innerHTML+=`
                   <div class="each-comment" id="eachComment">
                    <div class="each-comment-avatar"><img alt=""
                                    data-src="./images/NotLoad.png"
                                    src="${item.u_pic?item.u_pic:"./images/NotLoad.png"}"
                                    lazy="loaded"></div>
                            <div class="each-comment-msg">
                                <div class="each-comment-nickname"><span>${item.u_name}</span> <i class=""></i></div>
                                ${item.reply?'':`<div class="each-comment-content text-selection"><span title="${item.reply?'':item.msg}">${item.reply?'':item.msg}</span></div>`}
                                ${item.reply?`<div class="each-comment-content text-selection"><a href="javascript:;" class="reply-name">${item.reply?'回复@'+item.reply.u_name:''}</span></a> <span class="">${item.reply?item.msg:''}</span></div>`:''}
                                 ${item.reply?`<div class="each-reply-content"><span class="text-selection">${item.reply?item.reply.msg:''}</span></div>`:''}
                                <div class="each-comment-time">
                                    <div class="time">
                                      ${item.time}
                                    </div>
                                </div>
                            </div>
                               </div>
                  `
                }
              })
              plRender();
            })
} 


// 评论分页
 plRender()
function plRender() {
            layui.use('laypage', function () {
                 laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'plPagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: plTotals, //数据总数，从服务端得到
                    limit: plPageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            plPage = obj.curr;
                            plPageSize = obj.limit;
                            zuire();
                            zuixin();
                        }
                    }

                });
            });
}




})